<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one,.two,.three,.four{
            border: 2px solid blue;
            width: 500px;
            height:240px ;
            padding: 30px;
            position: absolute;
            left: 160px;
        }
        .father{
            border: 2px solid black;
            position: relative;
            width: 730px;
            height: 300px;
            padding: 10px;
            margin: auto;
            top: 100px;
        }
        ul{
            width: 100px;
            position: absolute;

        }
        tr,td,th{
            border: 1px #ccc solid;
            text-align: center;
            padding: 0px 5px;
        }
        table{
            width: 100%;
        }
        #tablehead{
            background: #d3d3d3;
        }
        tr:nth-of-type(2n+1){
            background: #8df08c;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
            init();
            dolimit();
            orderby();
            selectproduct();
            searchproduct();
            addsale();
            $(".xs").click(function (){
                $(".two").show();
                $(".one").hide();
                $(".three").hide();
                $(".four").hide();
            })
            $(".cx").click(function (){
                $(".three").show();
                $(".one").hide();
                $(".two").hide();
                $(".four").hide();
            })
            $(".ck").click(function (){
                $(".four").show();
                $(".one").hide();
                $(".three").hide();
                $(".two").hide();
            })
        })
        function init(){

            $("tr:gt(0)").remove();
            $.ajax({
                url:"getallsales",
                data:{
                    pageNo:$("#pageNo").html(),
                    orderBy:$(".three [name=orderBy]").val()
                },
                dataType:"json",
                async:false,
                success:function (obj){
                    $("#total").html(obj.total);
                    $("#pages").html(obj.pages);
                    $("#pageNo").html(obj.pageNum);
                    $(obj.list).each(function (i,sale){
                        var tr=$("<tr></tr>");
                        var td1=$("<td>"+sale.id+"</td>");
                        var td2=$("<td>"+sale.productname+"</td>");
                        var td3=$("<td>"+returnFloat(sale.price)+"</td>");
                        var td4=$("<td>"+sale.quantity+"</td>");
                        var td5=$("<td>"+returnFloat(sale.totalprice)+"</td>");
                        var td6=$("<td>"+sale.saledate+"</td>");
                        tr.append(td1,td2,td3,td4,td5,td6);
                        $(".three table").append(tr);
                    })
                }
            })
        }
        function dolimit(){
            $("#up").click(function (){
                var pageno=$("#pageNo").html()
                if (parseInt(pageno)!=1){
                    $("#pageNo").html(parseInt(pageno)-1);
                    init();
                }
            })
            $("#down").click(function (){
                var pageno=$("#pageNo").html()
                if (parseInt(pageno)!=parseInt($("#pages").html())){
                    $("#pageNo").html(parseInt(pageno)+1);
                    init();
                }
            })
            $("#head").click(function (){
                $("#pageNo").html(1);
                init();
            })
            $("#feet").click(function (){
                $("#pageNo").html($("#pages").html());
                init();
            })
        }
        function orderby(){
            $("#sub").click(function (){
                init();
            })
        }
        function selectproduct(){
            $.ajax({
                url:"getallproducts",
                dataType:"json",
                success:function (products){
                    $(products).each(function (i,product){
                        var option=$("<option value="+product.id+">"+product.productname+"</option>")
                        $(".option").append(option);

                    })
                }
            })
        }
        function searchproduct(){

            $("#search").click(function (){
                var val=$(".four .option").val()
                if (val==0){
                    alert("请选择商品")
                    return false
                }
                $.ajax({
                    url: "searchproduct",
                    data: $(".four form").serialize(),
                    dataType: "json",
                    success:function (product){
                       $(".four h1").html("该商品的库存数量是："+product.quantity)
                    }
                })
            })
        }
        function addsale(){
            $(".two #save").click(function (){
                var val1=$(".two .option").val()
                if (val1==0){
                    alert("请选择商品")
                    return false
                }
                var val2=$(".two [name=price]").val()
                if (val2==""){
                    alert("单价不能为空")
                    return false
                }
                var val3=$(".two [name=quantity]").val()
                if (val3==""){
                    alert("数量不能为空")
                    return false
                }
                $.ajax({
                    url:"addsale",
                    data:$(".two form").serialize(),
                    success:function (re){
                        if (re.trim()=="ok"){
                            alert("添加成功")
                            init();
                            $(".two [name=productid]").val(0);
                            $(".clear").val("")
                        }else {
                            alert("添加失败，库存不足")
                        }
                    }
                })
            })
        }
        function returnFloat(value){
            var value=Math.round(parseFloat(value)*100)/100;
            var xsd=value.toString().split( "." );
            if (xsd.length==1){
                value=value.toString()+ ".00" ;
                return value;
            }
            if (xsd.length>1){
                if (xsd[1].length<2){
                    value=value.toString()+ "0" ;
                }
                return value;
            }
        }
    </script>
</head>
<body>
<div class="father">
    <div class="left">
        <ul>
            <li><a class="xs" href="javascript:;">销售</a></li>
            <li><a class="cx" href="javascript:;">销售信息查询</a></li>
            <li><a class="ck" href="javascript:;">查看库存</a></li>
        </ul>
    </div>
    <div class="one"><h1>欢迎使用小型进销存系统</h1></div>
    <div class="two" style="display: none">
        <form>
            <span>添加销售：</span><br>
            <span>商品名称：</span><select name="productid" class="option">
            <option value="0">--请选择商品--</option>
        </select><br>
            <span>销售单价：</span><input type="number" name="price" class="clear"><br>
            <span>销售数量：</span><input type="number" name="quantity" class="clear"><br>
            <span></span><input type="button" id="save" value="保存">
        </form>
    </div>
    <div class="three" style="display: none">
        <span>销售信息查询:</span>
        <form><span>排序方式：</span>
            <select name="orderBy">
                <option value="saledate">销售日期</option>
                <option value="totalprice">总价</option>
            </select>
            <input type="button" id="sub" value="提交">
        </form>
        <table>
            <tr id="tablehead">
                <th>ID</th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
                <th>销售日期</th>
            </tr>
        </table>
        <div class="five" >
            一共<span id="total"></span>条数据，第<span id="pageNo">1</span>/<span id="pages"></span>页
            <input id="head" type="button" value="首页">
            <input id="feet" type="button" value="末页">
            <input id="up" type="button" value="上一页">
            <input id="down" type="button" value="下一页">
        </div>
    </div>
    <div class="four" style="display: none">
        <span>查看库存:</span>
        <form>
            <span>商品名称：</span><select name="id" class="option">
                <option value="0">请选择商品</option>
            </select>
            <input type="button" id="search" value="查询">
            <h1 class="clear"></h1>
        </form>
    </div>
</div>
</body>
</html>